<h1>Select</h1>

<h2>Default</h2>
<FluentSelect>
    <FluentOption>This option has no value</FluentOption>
    <FluentOption Disabled="true">This option is disabled</FluentOption>
    <FluentOption Value="hi">This option has a value</FluentOption>
    <FluentOption Selected="true">This option is selected by default</FluentOption>
</FluentSelect>

<h2>Filled</h2>
<FluentSelect Filled="true">
    <FluentOption>This option has no value</FluentOption>
    <FluentOption Disabled="true">This option is disabled</FluentOption>
    <FluentOption Value="hi">This option has a value</FluentOption>
    <FluentOption Selected="true">This option is selected by default</FluentOption>
</FluentSelect>

<h2>With Label</h2>
<label for="shirt-size">Choose a T-Shirt size:</label>
<FluentSelect id="shirt-size">
    <FluentOption Value="s">Small</FluentOption>
    <FluentOption Value="m">Medium</FluentOption>
    <FluentOption Value="l">Large</FluentOption>
    <FluentOption Value="xl">Extra Large</FluentOption>
</FluentSelect>

<h2>Disabled</h2>
<FluentSelect Disabled="true">
    <FluentOption>This option is not selectable</FluentOption>
</FluentSelect>

<FluentSelect>
    <FluentOption Disabled="true">This option is disabled</FluentOption>
    <FluentOption>This option is not disabled</FluentOption>
    <FluentOption>This option is not disabled</FluentOption>
</FluentSelect>

<h2>Selected Option</h2>
<FluentSelect>
    <FluentOption>Option One</FluentOption>
    <FluentOption Selected="true">Option Two</FluentOption>
    <FluentOption>Option Three</FluentOption>
    <FluentOption>Option Four</FluentOption>
</FluentSelect>

<h2>Custom Indicator</h2>
<FluentSelect>
    <svg slot="indicator" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z" />
    </svg>
    <FluentOption>Option One</FluentOption>
    <FluentOption>Option Two</FluentOption>
    <FluentOption>Option Three</FluentOption>
    <FluentOption>Option Four</FluentOption>
</FluentSelect>

<h2>Long list</h2>
<FluentSelect id="state" Name="state">
    <FluentOption Value="AL">Alabama</FluentOption>
    <FluentOption Value="AK">Alaska</FluentOption>
    <FluentOption Value="AZ">Arizona</FluentOption>
    <FluentOption Value="AR">Arkansas</FluentOption>
    <FluentOption Value="CA">California</FluentOption>
    <FluentOption Value="CO">Colorado</FluentOption>
    <FluentOption Value="CT">Connecticut</FluentOption>
    <FluentOption Value="DE">Delaware</FluentOption>
    <FluentOption Value="FL">Florida</FluentOption>
    <FluentOption Value="GA">Georgia</FluentOption>
    <FluentOption Value="HI">Hawaii</FluentOption>
    <FluentOption Value="ID">Idaho</FluentOption>
    <FluentOption Value="IL">Illinois</FluentOption>
    <FluentOption Value="IN">Indiana</FluentOption>
    <FluentOption Value="IA">Iowa</FluentOption>
    <FluentOption Value="KS">Kansas</FluentOption>
    <FluentOption Value="KY">Kentucky</FluentOption>
    <FluentOption Value="LA">Louisiana</FluentOption>
    <FluentOption Value="ME">Maine</FluentOption>
    <FluentOption Value="MD">Maryland</FluentOption>
    <FluentOption Value="MA">Massachussets</FluentOption>
    <FluentOption Value="MI">Michigain</FluentOption>
    <FluentOption Value="MN">Minnesota</FluentOption>
    <FluentOption Value="MS">Mississippi</FluentOption>
    <FluentOption Value="MO">Missouri</FluentOption>
    <FluentOption Value="MT">Montana</FluentOption>
    <FluentOption Value="NE">Nebraska</FluentOption>
    <FluentOption Value="NV">Nevada</FluentOption>
    <FluentOption Value="NH">New Hampshire</FluentOption>
    <FluentOption Value="NJ">New Jersey</FluentOption>
    <FluentOption Value="NM">New Mexico</FluentOption>
    <FluentOption Value="NY">New York</FluentOption>
    <FluentOption Value="NC">North Carolina</FluentOption>
    <FluentOption Value="ND">North Dakota</FluentOption>
    <FluentOption Value="OH">Ohio</FluentOption>
    <FluentOption Value="OK">Oklahoma</FluentOption>
    <FluentOption Value="OR">Oregon</FluentOption>
    <FluentOption Value="PA">Pennsylvania</FluentOption>
    <FluentOption Value="RI">Rhode Island</FluentOption>
    <FluentOption Value="SC">South Carolina</FluentOption>
    <FluentOption Value="SD">South Dakota</FluentOption>
    <FluentOption Value="TX">Texas</FluentOption>
    <FluentOption Value="TN">Tennessee</FluentOption>
    <FluentOption Value="UT">Utah</FluentOption>
    <FluentOption Value="VT">Vermont</FluentOption>
    <FluentOption Value="VA">Virginia</FluentOption>
    <FluentOption Value="WA">Washington</FluentOption>
    <FluentOption Value="WI">Wisconsin</FluentOption>
    <FluentOption Value="WV">West Virginia</FluentOption>
    <FluentOption Value="WY">Wyoming</FluentOption>
</FluentSelect>

<h2>Forced positions</h2>
<FluentSelect Position="Position.Above">
    <FluentOption>Position forced above</FluentOption>
    <FluentOption>Option Two</FluentOption>
</FluentSelect>

<FluentSelect Position="Position.Below">
    <FluentOption>Position forced below</FluentOption>
    <FluentOption>Option Two</FluentOption>
</FluentSelect>
